<template>
  <div class="sub-category">
    <van-grid :column-num="3" square>
      <van-grid-item
        v-for="category in subcategories"
        :key="category.id"
        :icon="category.imageUrl"
        :text="category.title"
      />
    </van-grid>
  </div>
</template>

<script>
import { getSubCategories } from '@/api/home.js'
export default {
  name: 'SubCategory',
  data () {
    return {
      subcategories: []
    }
  },
  async created () {
    console.log(this.$route)
    // 获取路由路径中传递的腹肌分类 id
    // const { id } = this.$route.query
    // 动态路由参数
    const { cid } = this.$route.params
    // 根据 父级分类 id 查询 子分类数据
    const result = await getSubCategories(cid)
    this.subcategories = result.categories
    console.log('数据', result)
  },
  watch: {
    async $route (newVal) {
      console.log('检控 变化了')
      // const { id } = newVal.query
      const { cid } = newVal.params
      // 根据 父级分类 id 查询 子分类数据
      const result = await getSubCategories(cid)
      this.subcategories = result.categories
      console.log('数据', result)
    }
  }

}
</script>

<style lang="less" scoped>
   .sub-category{
     height: 100%;
   }
</style>
